//导入模块
import { load } from "/code/web/util/LoadView.js"
//
load("pressCenter")
let timer = null
let list = []
//给搜索框绑定input事件
newsSearch.oninput = function () {
    //如果输入框内容为空
    if (!newsSearch.value || /^\s*$/.test(newsSearch.value)) {
        document.querySelector(".list-group").innerHTML = ""
        document.querySelector(".list-group").style.display = "none"
        return
    }
    //检查是否有定时器，有就清除
    if (timer) {
        clearTimeout(timer)
    }
    //设置定时器
    timer = setTimeout(async function () {
        //因为它是异步的，所以还是要判断一下输入框内容是否为空，否则当搜索完第一次后，清空输入框，会导致发送一次条件为空的请求，出现所有的内容
        if (!newsSearch.value) return
        //发送get请求，模糊查询对应内容
        let res = await fetch(`http://localhost:3000/news?title_like=${newsSearch.value}`).then(res => res.json())
        //渲染查询的内容
        document.querySelector(".list-group").innerHTML = res.map(function (item) {
            return `<li class="list-group-item"><a href="/code/web/view/detail/index.html?id=${item.id}" id="${item.id}">${item.title}</a></li>`
        }).join("")
        document.querySelector(".list-group").style.display = "block"
    }, 500)
}
//搜索框失去焦点时
newsSearch.onblur = function () {
    setTimeout(function () {
        document.querySelector(".list-group").style.display = "none"
    }, 200)
}
//搜索框获得焦点时
newsSearch.onfocus = function () {
    setTimeout(function () {
        document.querySelector(".list-group").style.display = "block"
    }, 200)
}

async function render(){
    await renderList()
    renderTab()

}
//渲染最新数据
async function renderList() {
    list = await fetch(`http://localhost:3000/news`).then(res => res.json())
    //反转数组，将最新的数据排在前面
    list.reverse()
    //截取最新的四条数据
    // console.log(list.slice(0,4))
    let cardContainer = document.querySelector(".cardContainer")
    cardContainer.innerHTML = list.slice(0, 4).map(item => {
        return `<div class="card" data-id="${item.id}">
        <div class="card-img-top" style="background-image:url(${item.photo});"></div>
        <div class="card-body">
        <h5 class="card-title" style="font-size:16px;">${item.title}</h5>
        <p class="card-text" style="font-size:13px;">作者：${item.author}</p>
        </div></div>`
    }).join("")
    for (let item of document.querySelectorAll(".card")) {
        item.onclick = function () {
            location.href = `/code/web/view/detail/index.html?id=${item.dataset.id}`
        }
    }

}
function renderTab() {
    //定义三个数组，接收不同类型的新闻
    let list1 = []
    let list2 = []
    let list3 = []
    //将三个数组集中在一起
    let list4 = [list1, list2, list3]
    let tabs = document.querySelectorAll(".tab")
    //遍历所有新闻，将其分类
    for (let i = 0; i < list.length; i++) {
        if (list[i].type == "最新动态") {
            list1.push(list[i])
        } else if (list[i].type == "典型案例") {
            list2.push(list[i])
        } else if (list[i].type == "通知公告") {
            list3.push(list[i])
        }
    }
    //渲染不同类型的新闻
    for(let i = 0; i < list4.length; i++) {
        tabs[i].innerHTML = list4[i].map(item => {
            return `<li class="tab-item" data-id="${item.id}">
            <a class="nav-link" href="#${item.id}" style="color:black;">
            <img src="${item.photo}" width="100" height="60" alt="">
            <span>${item.title}</span><br/>
            <span style="font-size:13px;color:gray;">作者： ${item.author}</span>
            </a>
            </li>`
        }).join("")
    }
    //给所有渲染的新闻 绑定点击事件
    for(let item of document.querySelectorAll(".tab-item")){
        item.onclick = function(){
            location.href = `/code/web/view/detail/index.html?id=${item.dataset.id}`
        }
    }
    // console.log(list)
}
render()
